<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
    <script src="Bootstrap/js/jquery-1.11.1.min.js"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var id ;
        var uid ;
        function addShoucang() {
            if(localStorage.user == null){
                alert("请先登录");
                location.href = "login.html";
                return false;
            }
            uid = JSON.parse(localStorage.user).id;
            $.ajax({
                url:"http://localhost:8080/zp/addShoucang?uid="+uid+"&rid="+id,
                type:"post",
                success:function (data) {
                    alert("收藏成功");

                }
            })
        }
        $(function() {
            id = location.href.split("?")[1];
            var html = "";
            $.ajax({
                url:"http://localhost:8080/zp/detail?id="+id,
                type:"post",
                success:function (data) {
                    var img = "http://127.0.0.1:8080"+data.file;
                    html += "<div class='title'>";
                    html += data.title;
                    html += "</div>  <div class='img'  style=' width: 95%;height: 212px;margin: auto;'>";
                    html += " <img alt='' style='width: 100%;height: 200px;margin: auto;' src="+img+" /></div>";
                    html += " <div class='content'> <span>";
                    html += data.release1;
                    html += " </span></div>";
                    html += " <span class='glyphicon glyphicon-eye-open'></span>"+data.clickNum+"<span style='float: right;'>"+data.starttime+"&nbsp;&nbsp;&nbsp;&nbsp;</span></div>";
                    $("#_content").append(html);
                }
            })
        });
    </script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body,html {
            font-family: "微软雅黑";
            color: gray;
        }
        #myModalLabel{
            margin-left: 42%;
        }

        .bottom-menu td {
            padding-top: 6px;
            font-size: 13px;
            height: 50px;
            width: 200px;
        }

        .my-center {
            background: #B22222;
            text-align: center;
        }
        .modal-body {
            height: 350px;
            margin-top: 30px;
        }
        .modal-content{
            margin-top: 90px;
        }
        /* 内容 */
        #_content{
            width: 90%;
            margin: 0 auto;
            text-align: justify;
            line-height: 20px;
            color: gray;
            margin-bottom: 45px;
        }
        .con img{
            width: 100%;
            height: 200px;
        }
        footer{
            width: 100%;
            position: fixed;
            bottom: 0px;
            height: 35px;
            background-color:#33CCCC;
        }
        footer div{
            float: left;
            height: 35px;
            /*border-right: 1px solid gainsboro;*/
        }
        .discuss{
            width: 90%;
            height: 25px;
            border: 1px solid gainsboro;
            border-radius: 13px;
            margin-left: 4%;
            margin-top: 5px;
        }
        footer span{
            color: whitesmoke;
            display: block;
            font-size: 20px;
            margin-left: 35%;
            margin-top: 6px;
        }

        .ok {
            float: right;
            margin-top: 20px;
        }
        .title{
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            color: #0f0f0f;
        }
    </style>
</head>
<body>
<!--列表组-->
<div style="background: url('images/3.jpg');">
	<a class="list-group-item active my-center" style="background:#33CCCC;border: 0">
    <header><span class="glyphicon glyphicon-chevron-left" style="float: left;color: white" onclick="javascript:history.back(-1);"></span>
      内容</header></a>
</div>
<div id="_content">

</div>


<footer>
    <div style="width: 60%"><span class="glyphicon glyphicon-pencil" style="color: red;position: absolute;display: inline-block;margin-left: 5%;font-size: 18px"></span><input type="text" class="discuss" style="padding-left: 28px" placeholder="请输入评论" data-toggle="modal"  data-target="#myModal" ></div>
    <div style="width: 20%"><a href="javascript:;" onclick="turn()"><span class="glyphicon glyphicon-comment" ></span></a></div>
    <script>
        function turn() {
            location.href="criticism.html?"+id;
        }
    </script>
    <div style="width: 20%"><span  onclick="addShoucang()" class="glyphicon glyphicon-heart-empty"></span></div>
</footer>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="height: 400px;margin-top: 230px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    评论
                </h4>
            </div>
            <div class="modal-body" style="height: 200px">
                <textarea class="form-control content" rows="5" id="comment" placeholder="请输入评论" style="margin-top: -25px"></textarea>
                <input type="button" class="btn btn-primary ok" onclick="comment()" value="发表评论">
            </div>
            <script>
              function comment() {
                  var comment = $("#comment").val();
                  if(localStorage.user == null){
                      alert("请先登录");
                      location.href = "login.html";
                      return false;
                  }
                  uid = JSON.parse(localStorage.user).id;
                  $.ajax({
                      url:"http://localhost:8080/zp/comment?uid="+uid+"&rid="+id+"&content="+comment,
                      type:"post",
                      success:function (data) {
                          alert("评论成功");
                      }
                  })
              }
            </script>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>